<!-- 菜单管理 -->
<template>
  <div class="menu-list-wp com-main _table-wp" v-loading="loadInterface > 0" element-loading-text="拼命加载中">

    <div class="com-hd-box">
      <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.menuInfo.open(1)">新增</el-button>
    </div>

    <div class="table-box">
      <el-table :data="table.data"
        size="medium"
        :header-cell-style="{'background-color': '#fafafa'}"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          type="selection"
          width="55"
          align="center">
        </el-table-column>
        <el-table-column v-for="(item, index) in table.head" :key="index"
          :prop="item.key"
          :label="item.name"
          :width="item.width"
          :formatter="item.formatter">
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <div class="_td-hd-box" slot-scope="scope">
            <el-link class="com-mr10" type="primary" :underline="false" @click="$refs.menuInfo.open(2, scope.row)">编辑</el-link>
            <el-dropdown size="medium" placement="bottom-start">
              <el-link type="primary" :underline="false">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><div @click="$refs.menuInfo.open(3, scope.row)">详情</div></el-dropdown-item>
                <el-dropdown-item><div @click="$refs.menuInfo.open(4, scope.row)">添加子菜单</div></el-dropdown-item>
                <el-dropdown-item><div @click="handleDelete(permission.deleteBatch, scope.row.id)">删除</div></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-table-column>
      </el-table>
    </div>

    <!-- 菜单管理 -->
    <menu-info :menuList="table.data" ref="menuInfo" @reload="getData()"></menu-info>
  
  </div>
</template>
<script>

import menuInfo from "@/dialogs/system/menu/menu-info.vue";

import TableMixin from "@/mixins/TableMixin.js";

import {permission} from "@/config/api.js";

export default {
  name: 'system-menu',
  mixins: [TableMixin],
  components: {
    menuInfo,
  },
  data () {
    return {
      table: {
        head: [
          {name: '菜单名称', key: 'name'},
          {name: '菜单类型', key: 'menuType', formatter: (row, column, cellValue, index) => {
            return this.$g.getNameByValue({
              list: this.$store.state.dict.menuType,
              value: cellValue
            })
          }},
          {name: 'icon', key: 'icon'},
          {name: '组件', key: 'component'},
          {name: '路径', key: 'url'},
          {name: '排序', key: 'sortNo'},
        ],
        data: []
      },

      url: {
        list: permission.list,
        delete: permission.deleteBatch
      }

    }
  },
  methods: {
    // 重置
    loadData () {
      this.loadInterface = 1; // 设置加载接口数量为1
      this.$get(this.url.list).then(res => {
        this.table.data = res.result;
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.menu-list-wp {
  
}
</style>